<template>
  <div id="list" class="app-container">
    <!-- 搜索 -->
    <div class="filter-container">
      <el-input
        v-model="filter.name"
        placeholder="商品搜索"
        prefix-icon="el-icon-search"
        :clearable="true"
        style="width: 200px;"
        @change="searchShop"
      />
      <SelectCate :value="filter.cate" @change="changeCate" />
      <el-date-picker
        v-model="filter.date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="margin-left:2rem"
      />
    </div>
    <!-- 商品展示 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="selectHandle"
    >
      <el-table-column
        type="selection"
        align="center"
      />
      <el-table-column
        prop="name"
        label="商品"
        align="center"
      >
        <template slot-scope="scope">
          <div class="shopNameAndImg">
            <img :src="baseImg + scope.row.img" alt="">
            <div>{{ scope.row.name }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_time"
        label="发布时间"
        align="center"
        width="130"
        sortable
      >
        <template slot-scope="scope">
          <div v-text="$util.handleDate(scope.row.create_time,'YYYY年MM月DD日')" />
          <div v-text="$util.handleDate(scope.row.create_time,'HH点mm分ss秒')" />
        </template>
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        align="center"
        width="180"
      />
      <el-table-column
        prop="status"
        label="商品状态"
        sortable
        align="center"
        width="120"
      />
      <el-table-column
        prop="cate"
        label="品类"
        align="center"
      >
        <template slot-scope="scope">
          <span v-text="changeCateName(scope.row.cate)" />
        </template>
      </el-table-column>
      <el-table-column
        label="价格"
        prop="price"
        width="100"
        align="center"
        sortable
      >
        <template slot-scope="scope">
          {{ scope.row.price | handlePrice }}
        </template>
      </el-table-column>
      <el-table-column
        prop="rank"
        align="center"
        label="人气排名"
        width="100"
        sortable
      />
      <el-table-column
        prop="hot"
        align="center"
        label="是否热销"
      >
        <template slot-scope="scope">
          {{ scope.row.hot? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="rowHandle(scope.row, 1)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="rowHandle(scope.row, 0)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      size="mini"
      type="danger"
      style="margin-top: 20px"
      @click="delSelectShop"
    >删除所选行
    </el-button>
    <!-- 页码 -->
    <Pagination
      :total="total"
      :page-sizes="[3,6,12]"
      :page="filter.page"
      :limit="filter.limit"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SelectCate from '@/components/Good/SelectCate'
import { mapGetters } from 'vuex'
export default {
  components: {
    Pagination,
    SelectCate
  },
  data() {
    return {
      tableData: [],
      filter: {
        page: 1,
        limit: 3,
        name: '',
        cate: '',
        date: ''
      },
      total: 0,
      baseImg: 'http://localhost:3000'
    }
  },
  created() {
    this.init()
  },
  computed: {
    ...mapGetters(['cates'])
  },
  methods: {
    init() {
      const params = {
        ...this.filter,
        size: this.filter.limit
      }
      this.$goodsApi.goodsList(params).then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
        // console.log(res);
      })
    },
    pagination(e) {
      console.log(e)
      this.filter.page = e.page
      this.filter.limit = e.limit
      this.init()
    },
    searchShop() {
      this.filter.page = 1
      this.init()
    },
    changeCate(val) {
      this.filter.page = 1
      this.filter.cate = val
      this.init()
    },
    // 英文类别转换为中文类别
    changeCateName(cate) {
      const flag = this.cates.find(item => cate === item.cate)
      return flag ? flag.cate_zh : ''
    },
    // 封装删除商品
    delDate(ids) {
      this.$goodsApi.fetchDelShop({ ids }).then(doc => {
        this.init()
      })
    },
    // 删除单个
    rowHandle(item, flag) {
      if (!flag) {
        return this.delDate(item._id)
      }
      this.$router.push('edit/' + item._id)
      console.log(item)
    },
    selectHandle(e) {
      this.rows = e
    },
    // 删除选中商品
    delSelectShop() {
      if (!this.rows || !this.rows.length) return
      let ids = ''
      this.rows.forEach(item => { ids += (';' + item._id) })
      this.delDate(ids)
    }
  }
}
</script>

<style lang="scss">
.shopNameAndImg {
  img {
    width: 80px;
    height: 80px;
  }
}

</style>
